import { observer } from 'mobx-react'
import { useStore } from '@renderer/store'
import { Input, Select } from '@arco-design/web-react'
import { IconSearch } from '@arco-design/web-react/icon'
import NoteCard from '@renderer/components/NoteCard'
const Option = Select.Option;

function NoteBook() {
  const { noteStore } = useStore()

  return <>
  <div className="page-wrapper">

    <div className="header">
      <div>
        <Input style={{ width: 350 }} prefix={<IconSearch />}  allowClear  placeholder='Search note' />
      </div>
      <Select
        placeholder='Recently'
        style={{ width: 154 }}
        defaultValue={1}
      >
        <Option key={1} value={1}>Recently</Option>
        <Option key={2} value={2}>Favorites</Option>
      </Select>
    </div>

  <div className="note-list">
    {noteStore.noteList.length > 0 && noteStore.noteList.map(item => {
      return <div key={item.id} className="item"><NoteCard data={item} /></div>
    })}
  </div>
</div>
</>
}

export default observer(NoteBook)
